<template>
  <vant-form
    :validate-first="true"
    class="page-p-l page-p-r no-lr"
    input-align="right"
    @submit="onSubmit"
  >
    <app-picker-field
      label="注册省份"
      v-model="form.xzqhdm"
      :columns="list"
      input-align="right"
      :rules="[{ required:true }]"
      @confirm="changeXzqh"
    ></app-picker-field>

    <vant-cell title="道路运输经营许可证号" class="vant-cell-l vant-cell-flex p-r-0">
      <span>
        <i class="form-item c-result">{{form.shortName}}</i><i class="des">交运管许可</i>
      </span>
      <vant-field
        label
        v-model="form.licenseNo"
        placeholder="请输入"
        maxlength="2"
        key="licenseNo"
        input-align="left"
        class="w-3em form-item"
        :rules="[{validator:validatorNo}]"
      />
      <span class="des">字</span>
      <vant-field
        label
        type="number"
        v-model="form.licenseNo1"
        placeholder="请输入"
        maxlength="12"
        key="licenseNo1"
        input-align="left"
        class="w-12em form-item"
        :rules="[{validator:validatorNo1}]"
      />
      <span class="des">号</span>
    </vant-cell>
    <vant-field
      name="uploader"
      label="道路运输经营许可证照片"
      :rules="[{ validator, message: '请上传照片' }]"
      class="vant-cell-l"
    >
      <template #input>
        <app-uploader v-model="form.images" :max-count="maxCount" accept=".png, .jpeg, .jpg" />
      </template>
    </vant-field>

    <vant-cell class="s-btn-t60 s-btn-b20">
      <vant-button round block type="danger">提交</vant-button>
    </vant-cell>
  </vant-form>
</template>

<script>
import { Vant } from '@components/Vant/index'
import { getXzqh } from "@apis/xzqh"
import { save } from '@apis/register'

export default {
  data() {
    return {
      maxCount: 1,
      form: {
        xzqhdm: '',
        licenseNo: '',
        licenseNo1: '',
        images: '',
        shortName: ''
      },
      /*fileList:'',  [
        // { url: 'https://img01.yzcdn.cn/vant/leaf.jpg' ,fileName:'aaa'},
        // Uploader 根据文件后缀来判断是否为图片文件
        // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
        // { url: 'https://cloud-image', isImage: true },
         0000202204194A0EBF97687C31982C48,
        0000202204194061B6AE41CEDAC09EF4,
        00002022041949588D65620770334039 
      ], */
      list: [],
    }
  },
  created() {
    this.getXzqh()
  },
  methods: {
    validatorNo(v){
      const flag = !!v && /^[\u4E00-\u9FA5]{1,2}$/g.test(v)
      if(!flag){
        Vant.Toast(`请输入最多两个汉字`)
      }
      return flag
    },
    validatorNo1(v){
      const flag = !!v && /^\d{12}$/g.test(v);
      if(!flag){
        Vant.Toast(`请输入12位数字号码`)
      }
      return flag
    },
    getXzqh() {
      getXzqh({ lvl: "2" }).then(res => {
        const { data = [] } = res || {};
        this.list = data
      })
    },
    onSubmit() {
      save(this.form).then(() => {
        this.$router.replace('wait')
      })
    },
    validator() {
      return !!this.form.images && this.form.images.split(',').length === this.maxCount
    },
    changeXzqh(names, info) {
      console.log(...arguments);
      this.form.shortName = (Array.isArray(info) ? info[0] : info).shortName
    }
  }
}
</script>

<style lang="less" scoped>
.vant-cell-flex {
  & /deep/ .van-cell__value {
    display: flex;
    justify-content: flex-end;
    .van-cell__value {
      display: inline-block;
      vertical-align: top;
      font-style: normal;
    }
    .van-cell::after{
      display: none;
    }
  }
}
.p-r-0 {
  padding-right: 0;
}
.form-item {
  padding: 0 4px;
  box-sizing: content-box;
  font-style: normal;
   & /deep/ .van-field__control{
    text-align: center;
  }
}
.w-3em {
  width: 3em;
}
.w-12em {
  width:8em;
}
.no-lr{
  & >.van-cell {
    padding-left:0;
    padding-right:0;
    &:after{
      left:0px;
      right:0px;
    }
  }
}
.des{
  font-style: normal;
  color:@c-button-black;
}
</style>